<template>
  <el-card class="product-card" shadow="hover">
    <div class="product-image-container">
      <el-image
          :src="product.image?.url"
          class="product-image"
          fit="cover"
          @click="handleClickDetail"
      >
        <template #error>
          <div class="image-error">
            <el-icon>
              <Picture/>
            </el-icon>
          </div>
        </template>
      </el-image>

      <!-- 状态标签 -->
      <div class="product-tags">
        <el-tag v-if="product.status === 1" size="small" type="success">在售</el-tag>
        <el-tag v-else size="small" type="info">已售</el-tag>
      </div>
    </div>

    <div class="product-content">
      <el-button class="product-name" type="text" @click="handleClickDetail">{{ product.name }}</el-button>

      <div class="product-info">
        <div class="seller-info">
          <el-icon>
            <User/>
          </el-icon>
          <el-text line-clamp="1">{{ product.sellerName }}</el-text>
        </div>

        <div class="category-info">
          <el-tag size="small" type="info">{{ product.categoryName }}</el-tag>
        </div>
      </div>

      <div class="product-footer">
        <div class="price-info">
          <span class="current-price">¥{{ product.price.toFixed(2) }}</span>
        </div>

        <div class="action-buttons" @click.stop>
          <el-button
              :icon="product.collect ? 'StarFilled' : 'Star'"
              :type="product.collect ? 'warning' : 'default'"
              circle
              size="small"
              @click="handleAddToFavorite"
          />
          <el-button type="success" size="small" circle icon="ShoppingCart"
                     @click="handleAddToCart"></el-button>
          <el-button
              :disabled="product.status !== 1"
              size="small"
              type="primary"
              @click="handleContact"
          >
            <el-icon>
              <ChatDotRound/>
            </el-icon>
            {{ product.status === 1 ? '联系卖家' : '已售出' }}
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {ChatDotRound, Picture, User} from '@element-plus/icons-vue'
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const props = defineProps({
  product: {
    type: Object,
    required: true
  }
})

// 联系卖家
const handleContact = async () => {
  const id = await request.post('/chat/createSession', {
    businessId: props.product.id,
    businessType: 2,
    userId: props.product.sellerId
  })
  await router.push(`/userHome/chatRoom?id=${id}`)
}

const handleAddToCart = async () => {
  await request.post('/cart', {businessType: 2, businessId: props.product.id, count: 1})
  ElMessage.success('已添加到购物车')
}

// 添加到收藏
const handleAddToFavorite = async () => {
  props.product.collect = !props.product.collect
  const msg = await request.post('/collect', {businessType: 2, businessId: props.product.id})
  ElMessage.success(String(msg))
}

// 点击详情
const router = useRouter()
const handleClickDetail = () => {
  router.push({
    path: '/userHome/productDetail',
    query: {id: props.product.id}
  })
}
</script>

<style scoped>
.product-card {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-2px);
}

.product-image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.product-image {
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.product-tags {
  position: absolute;
  top: 8px;
  left: 8px;
}

.product-content {
  padding: 5px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-info {
  margin-bottom: 5px;
}

.seller-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
}

.seller-info .el-icon {
  margin-right: 4px;
}

.category-info {
  margin-bottom: 8px;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-price {
  font-size: 18px;
  font-weight: 600;
  color: #ff4757;
}

.action-buttons {
  display: flex;
  align-items: center;
}
</style> 